<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>sessionStorage</title>
</head>
<body>
    <!-- 特点：浏览器关了之后 就没了
              把与浏览器的交互看成一个会话，只要浏览器关闭那么会话就没有了
    -->
   <h2>sessionStorage</h2>
   <button onclick="saveData()">点我保存一个数据</button>
   <button onclick="getData()">点我输出一个数据</button>
   <button onclick="deleteData()">点我删除一个数据</button>
   <button onclick="clearData()">点我清空数据</button>



   <script type='text/javascript'>
       let p = {name:'zhoujie',age:22}
       function saveData(){
          sessionStorage.setItem("msg1","hello")
          sessionStorage.setItem("msg2",999)
          /**
           * (1) 由于键值对的值会默认调用toString()方法
           *     而对象toString()之后会变成object Object，看不到内容
           *     因此要使用JSON.stringify，它可以转化成JSON形式的字符串
           * */ 
          sessionStorage.setItem("person",JSON.stringify(p))
       }

       function getData(){
           // (2) Json.parse是把字符串形式的值再转化成原来的类型
           console.log(JSON.parse(sessionStorage.getItem("person")));
           // (3) 若sessionStorage找不到该对象则会返回null，再经过JSON.parse转化还是null(已经是非字符串了，则保持不变)  
           console.log(JSON.parse(sessionStorage.getItem("person4")));
       }

       function deleteData(){
           sessionStorage.removeItem("msg1")
       }

       function clearData(){
           sessionStorage.clear()
       }
   </script>
</body>
</html>